      <template>
      <el-dialog :title="title" :width="width" :visible.sync="dialogFormVisible" :close-on-click-modal="false" @close="closeDialog">
        <el-form :model="deviceData"  :rules="rules" ref="deviceRef" label-width="160px">
          <el-form-item label="批量上传：" :required="true">
             <div class="upload-box">
                <el-upload
                  action= ""
                  :show-file-list="false"
                  :on-success="handleBusinessAvatarScucess"
                  :before-upload="beforeAvatarUpload">
                  <span v-if="download.id" class="avatar">{{download.id}}</span>
                  <el-button size="mini" type="primary" icon="el-icon-upload2">文件上传</el-button>
                </el-upload>
             </div>
             <span class="down">下载模板</span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeDialog()">取 消</el-button>
          <el-button type="primary" @click="confirmDialog">确 定</el-button>
        </div>
      </el-dialog>
    </template>
    <script>
    export default {
        data() {
            return {
                dialogFormVisible: this.isShow, //控制弹层是否显示
                download: {},
                deviceData: {
                  mode: '1'
                },
                rules: {
                  mode:  { required: true, message: '请选择设备类型', trigger: 'change' }
                }
            }
        },
        props: ['isShow', 'title', 'width'],
        methods: {
          //设置弹窗可见
           closeDialog() {
             this.$emit('closeDialog')
           },
            //上传图片之前
            beforeAvatarUpload(file) {
              const isRightType = (file.type === 'image/jpeg') || (file.type === 'image/png')
              const isLt2M = file.size / 1024 / 1024 < 2

              if (!isRightType) {
                this.$message.error('上传头像图片只能是 JPG 格式!')
              }
              if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
              }
              return isRightType && isLt2M
            },
            //上传图片成功
            handleBusinessAvatarScucess(res, file) {
                if (res.status === 1) {
                    this.download.id = res.image_path
                    console.log( this.download.id)
                } else {
                    this.$message.error('上传图片失败！')
                }
            },
            confirmDialog() {
              this.$message({
                message: '批量绑定传感器成功',
                type: 'success'
              });
            }
        }
    }
    </script>
    <style lang="less" scoped>
      .upload-txt {
        color: #409EFF;
      }
      .upload-box {
        display: inline-block;
      }
      .down {
        color: #409EFF;
        cursor: pointer;
      }
    </style>
    